<template>
	<div>
		<breadcrumb></breadcrumb>
		<div class="titleBox">
			<!-- icon-dingdan -->
			<div class="iconfontcolor icon-dingdan"></div>
			<div class="infoBox">
				<div class="info_line1">
					<h3 class="tit">{{ couponSubtableRequest.couponAlias }}</h3>

				</div>
				<div class="info_line2">
					<div style="margin-right: 15px">
						创建时间：{{ couponRequest.createTime }}
					</div>
					<div style="margin-right: 15px">
						创建人：{{ couponRequest.createBy }}
					</div>
				</div>
			</div>
			<!-- 0代表下架 1代表上架 -->
			<button class="examineBtn" @click="offShelf">{{ couponRequest.couponState != 0 ? '下架' : '上架' }}</button>

		</div>

		<div class="main">
			<div class="main_item">
				<titleVue :title="'基本信息'"></titleVue>
				<el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
					color: '#939393',
					fontSize: '12px',
					fontWeight: 'bold',
					marginRight: '20px',
				}" :contentStyle="{
	color: '#262626',
	fontSize: '12px',
}">
					<el-descriptions-item label="类型">{{ couponSubtableRequest.couponType }}</el-descriptions-item>
					<el-descriptions-item label="总数量">{{
						couponRequest.couponTotal == 0 ? '不限' : couponRequest.couponTotal
					}}张</el-descriptions-item>
					<el-descriptions-item label="面额" v-if="couponSubtableRequest.couponType == '满减券'">{{
						couponSubtableRequest.reduction }}元</el-descriptions-item>
					<el-descriptions-item label="返点"
						v-if="couponSubtableRequest.couponType == '折扣券' || couponSubtableRequest.couponType == '返点券'">
						<div v-if="couponSubtableRequest.couponType == '折扣券' && couponSubtableRequest.list.length != 0">
							<div v-for="item in couponSubtableRequest.list" :key="item.sid">
								运费
								<span class="HighlightText">{{ item.beginNumber * 1 }}~{{ item.endNumber * 1 }}</span>
								折扣
								<span class="HighlightText">{{ item.discount + '%' }}</span>
							</div>
						</div>
						<div v-else-if="couponSubtableRequest.couponType == '折扣券'">
							<span class="HighlightText">{{ couponSubtableRequest.reduction }}%</span>
						</div>
						<div v-else-if="couponSubtableRequest.couponType == '返点券'">
							<span class="HighlightText">{{ couponSubtableRequest.reduction }}%</span>
						</div>
					</el-descriptions-item>



					<el-descriptions-item label="优惠条件">
						<div v-if="couponSubtableRequest.couponType == '满减券'">
							<!-- 满减券  meetWith为'',代表无门槛  有值代表 满meetWith减reduction'-->
							<div v-if="couponSubtableRequest.meetWith">
								满<span class="HighlightText">{{ couponSubtableRequest.meetWith }}</span>减<span
									class="HighlightText">{{ couponSubtableRequest.reduction }}</span>
							</div>
							<div v-else>
								无门槛使用
							</div>
						</div>
						<!-- 阶梯折扣券 -->
						<div
							v-else-if="couponSubtableRequest.couponType == '折扣券' && couponSubtableRequest.list.length != 0">
							按运费区间折扣
						</div>
						<!-- 普通折扣券 -->
						<div
							v-else-if="couponSubtableRequest.couponType == '折扣券' && couponSubtableRequest.list.length == 0">
							<div>
								<span v-if="couponSubtableRequest.meetWith == ''">无门槛抵扣 </span>
								<span v-else>满{{ couponSubtableRequest.meetWith }} 折扣</span>
								<span class="HighlightText">{{ couponSubtableRequest.reduction + '%' }}</span>
							</div>
						</div>
						<!-- 无门槛 返点券 -->
						<div v-else-if="couponSubtableRequest.couponType == '返点券'">
							<span v-if="couponSubtableRequest.meetWith == ''">无门槛使用</span>
							<span v-else-if="couponSubtableRequest != ''">满{{ couponSubtableRequest.meetWith }}使用</span>
						</div>
						<!-- 满 返点券 -->
					</el-descriptions-item>
					<el-descriptions-item label="适用场景">{{ couponSubtableRequest.couponScene }}</el-descriptions-item>
					<!-- <el-descriptions-item label="优惠说明"></el-descriptions-item> -->
				</el-descriptions>
			</div>
			<div class="main_item">
				<titleVue :title="'发放与领用设置'"></titleVue>
				<el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
					color: '#939393',
					fontSize: '12px',
					fontWeight: 'bold',
					marginRight: '20px',
				}" :contentStyle="{
	color: '#262626',
	fontSize: '12px',
}">


					<!-- 0为系统推送,默认为0,1为指定司机 -->
					<el-descriptions-item label="发放方式">{{ couponRequest.sendType == 0 ? '系统推送' : '指定司机'
					}}</el-descriptions-item>
					<!-- 发送方式0推送对应平台全部1,用户累计在线时长2,司机完成单数  -->
					<el-descriptions-item label="发放条件">
						<div v-if="couponRequest.couponSend == 0">推送对应平台全部</div>
						<div v-if="couponRequest.couponSend == 2">用户累计在线{{ couponRequest.numericalValue }}小时</div>
						<div v-if="couponRequest.couponSend == 1">司机完成{{ couponRequest.numericalValue }}单</div>
					</el-descriptions-item>
					<el-descriptions-item label="有效期">
						<div v-if="couponRequest.timeType == 0">
							领取当日起{{ couponRequest.timeNumber }}天
						</div>
						<div v-else-if="couponRequest.timeType == 1">
							{{ couponRequest.beginTime }} 至 {{ couponRequest.endTime }}
						</div>
					</el-descriptions-item>
					<el-descriptions-item label="每人限领">{{ couponRequest.couponNumber }}张</el-descriptions-item>
				</el-descriptions>
			</div>

			<div class="main_item">
				<titleVue :title="'领取记录'"></titleVue>
				<el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
					color: '#939393',
					fontSize: '12px',
					fontWeight: 'bold',
					marginRight: '20px',
				}" :contentStyle="{
	color: '#262626',
	fontSize: '12px',
}">
					<el-descriptions-item label="已领取">{{ receiveNumber }}张</el-descriptions-item>
					<el-descriptions-item label="剩余数量">{{ couponRequest.couponTotal - receiveNumber
					}}张</el-descriptions-item>
				</el-descriptions>


				<div class="list">
					<el-table :data="receiveListVos" style="width: 100%" :header-cell-style="{
						height: '40px',
						backgroundColor: '#F5F5F5',
						color: '#262626',
						fontSize: '12px',
						padding: '0',
						fontweight: 'bold',
					}">
						<el-table-column align="center" prop="nickName" label="用户名">
						</el-table-column>
						<el-table-column align="center" prop="phonenumber" label="手机号">
						</el-table-column>
						<el-table-column align="center" prop="receivedNumber" label="领取数量">
						</el-table-column>
						<el-table-column align="center" prop="" label="已使用">
							<template slot-scope="scope">
								<span>{{
									parseInt(scope.row.receivedNumber) - parseInt(scope.row.notUse)
								}}</span>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="notUse" label="未使用">
						</el-table-column>
						<el-table-column align="center" label="操作">
							<template slot-scope="scope">
								<div>
									<div>
										<el-button type="text" size="small"
											@click="getUserCouponDetails(scope.row.receiveUser)">详情</el-button>
									</div>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页 -->
					<!-- <div class="paginationBox">
						<el-pagination @current-change="changePages($event)" class="pagination" background
							layout="slot,prev, pager, next" :total="data.total * 1" :page-size="data.size * 1"
							:pager-count="5">
							<template slot>
								<span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ data.size }}条</span>
							</template>
						</el-pagination>
					</div> -->
				</div>
			</div>
		</div>

		<el-dialog class="dialog" title="用户优惠券详情" :visible.sync="visibleDialogBox" width="920px">
			<el-table :data="UserCouponData" style="width: 100%" :header-cell-style="{
				height: '40px',
				backgroundColor: '#F5F5F5',
				color: '#262626',
				fontSize: '12px',
				padding: '0',
				fontweight: 'bold',
			}">
				<el-table-column align="center" prop="" label="优惠券名称">
					<template >
						<div>
							{{ couponSubtableRequest.couponAlias }}
						</div>
					</template>
				</el-table-column>
			<!-- 	<el-table-column align="center" label="使用条件">
					<template slot-scope="scope">
						<div v-if="scope.row.couponType == '满减券'">满
							<span class="HighlightText">{{ scope.row.meetWith }}</span>减
							<span class="HighlightText">{{ scope.row.reduction }}</span>
						</div>
						
						<div v-else-if="scope.row.couponType == '折扣券' && scope.row.stepPortNumbers.length != 0">
							<div v-for="item in scope.row.stepPortNumbers" :key="item.sid">
								运费
								<span class="HighlightText">{{ item.beginNumber * 1 }}~{{ item.endNumber * 1 }}</span>
								折扣
								<span class="HighlightText">{{ item.discount + '%' }}</span>
							</div>
						</div>
						
						<div v-else-if="scope.row.couponType == '折扣券' && scope.row.stepPortNumbers.length == 0">
							<div>
								<span v-if="scope.row.meetWith == ''">无门槛抵扣 </span>
								<span v-else>满{{ scope.row.meetWith }}元 折扣</span>
								<span class="HighlightText">{{ scope.row.reduction + '%' }}</span>
							</div>
						</div>
						<div v-else-if="scope.row.couponType == '返点券'">
							<span v-if="scope.row.meetWith == ''">无门槛使用</span>
							<span v-else-if="scope.row.meetWith != ''">满{{ scope.row.meetWith }} </span>
							返点<span class="HighlightText">{{ scope.row.reduction }}%</span>
						</div>
					</template>
				</el-table-column> -->
				<el-table-column align="center" prop="receiveTime" label="领取时间">
				</el-table-column>
				<el-table-column align="center" prop="" label="使用时间">
					<template slot-scope="scope">
						<div>{{ scope.row.useCouponTime || '--.--' }}</div>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="" label="关联运单">
					<template slot-scope="scope">
						<div>{{ scope.row.waybillNo || '--.--' }}</div>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import titleVue from "@/components/titleVue";
import httpApi from "@/http";
import BASEURL from "@/http/BaseUrl";
export default {
	data() {
		return {
			
			couponRequest: {},
			couponSubtableRequest: {},
			receiveListVos: [],
			result: [],
			couponName: {},
			receiveNumber: 0,
			visibleDialogBox: false,
			UserCouponData: [],

		};
	},
	created() {
	},
	methods: {
		async initDetails() {
			let res = await httpApi.operationManagementApi.couponDetails({
				cid: this.$route.query.cid,
			});
			if (res.data.code == 200) {
				this.couponRequest = res.data.data.couponRequest
				this.couponSubtableRequest = res.data.data.couponSubtableRequest
				this.receiveListVos = res.data.data.receiveListVos;
				this.receiveListVos.forEach((item, index) => {
					this.receiveNumber = this.receiveNumber + parseInt(item.receivedNumber)
				})
				this.couponName = res.data.data.couponSubtableRequest.couponName
				console.log(this.couponRequest.couponTotal, this.receiveNumber);

			}

		},

		offShelf() {
			this.$confirm(`此操作将${this.couponRequest.couponState != 0 ? '下架' : '上架'}优惠券,是否继续?`, {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				httpApi.operationManagementApi.modifyCouponState({ cid: this.$route.query.cid }).then(res => {
					this.$message.success(res.data.msg)
					this.initDetails();
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消操作'
				});
			});

		},
		getUserCouponDetails(receiveUser) {
			this.visibleDialogBox = true
			let params = {
				cid: this.$route.query.cid,
				receiveUser: receiveUser
			}
			httpApi.operationManagementApi.userCouponDetails(params).then(res => {
				if (res.data.code == 200) {
					this.UserCouponData = res.data.data
				}
			})
		},
		formatDate(time) {
			if (time == null || time == "") return "";
			let date = new Date(cellValue)
			let year = date.getFullYear()
			let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
			let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
			let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
			let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
			let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
			return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
		}






	},
	mounted() {
		this.initDetails();
	},
	components: {
		breadcrumb,
		titleVue,
	},
};
</script>

<style lang="scss" scoped>
.titleBox {
	flex: 1;
	background-color: #fff;
	height: 119px;
	display: flex;
	align-items: center;
	padding: 0 35px;
	margin-bottom: 9px;

	.feeGroup {
		margin-left: auto;
		display: flex;

		.feeBox {
			display: flex;
			width: 180px;
			align-items: center;

			.intervalLine {
				width: 2px;
				height: 64px;
				background-color: #f0f0f0;
				margin-right: 20px;
			}

			.feeItem {
				display: flex;
				flex-direction: column;
				margin-right: 20px;

				.tit {
					color: #a3a3a3;
					font-size: 12px;
					margin-bottom: 14px;
				}

				.price {
					color: #262626;
					font-size: 18px;
					font-weight: Bold;
				}
			}
		}
	}


	.icon-dingdan {
		font-size: 43px;
		margin-right: 10px;
	}

	.infoBox {
		display: flex;
		flex-direction: column;
		justify-content: center;

		.info_line1 {
			margin-bottom: 3px;
			display: flex;
			align-items: center;

			>.tit {
				font-size: 18px;
				font-family: Microsoft YaHei;
				font-weight: bold;
				margin-right: 8px;
				color: #262626;
			}

			>.tag {
				background-color: #ecf5fe;
				border-radius: 4px;
				width: 54px;
				height: 20px;
				color: #1890ff;
				font-size: 10px;
				text-align: center;
				line-height: 20px;
			}
		}

		.info_line2 {
			display: flex;
			color: #939393;
			font-size: 12px;
		}
	}

	.examineBtn {
		background-color: #1890ff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4px;
		color: #ffffff;
		font-size: 12px;
		width: 80px;
		height: 36px;
		cursor: pointer;
		margin-left: auto;

		&:hover {
			opacity: 0.8;
			transition: 0.2s;
		}
	}
}

.HighlightText {
	font-size: 12px;
	font-family: PingFang SC;
	font-weight: 400;
	color: #1890FF;
}

.main {
	padding: 35px;
	background-color: #fff;
	min-height: calc(100vh - 255px);



	.main_item {
		margin-bottom: 40px;


		.list {
			border: 1px solid #f0f0f0;

			.routeBox {
				display: flex;
			}
		}
	}

	.paginationBox {
		border-top: 1px solid #f0f0f0;
		width: 100%;
		background-color: #fff;
		display: flex;
		height: 48px;
		align-items: center;
		padding: 0 30px;

		.pagination {
			margin-left: auto;
		}
	}
}

.dialog {
	::v-deep .el-dialog__header {
		border-bottom: 1px solid #f0f0f0;
		padding: 15px 20px;
		color: #262626;
		font-size: 14px;
		font-weight: bold;
		height: 50px;
	}

	::v-deep .el-dialog__title {
		font-size: 14px;
		color: #303133;
		font-weight: bold;
	}

	//关闭图标
	::v-deep .el-dialog__headerbtn .el-dialog__close {
		font-size: 15px;
	}

	::v-deep .el-dialog__body {
		padding: 20px;
	}

}
</style>